<template>
  <div class="article">
      <link rel="stylesheet" href="/static/js/editor.md/css/editormd.preview.min.css" />
      <!-- <remote-js src="/static/js/jquery-1.8.3.min.js"></remote-js> -->
      <remote-js src="/static/js/editor.md/editormd.min.js"></remote-js>
      <remote-js src="/static/js/editor.md/lib/marked.min.js"></remote-js>
      <remote-js src="/static/js/editor.md/lib/prettify.min.js"></remote-js>
      <el-card shadow="hover" class="article-info animated fadeIn">
          <h2>{{detial.title}}</h2>
          <el-row class="meta">
            <span class="post-time">
              <span class="meta-item-icon"><i class="fa fa-calendar-o"></i></span>
              <span class="meta-item-text">发表于</span>
              <time :title="'创建时间：'+detial.create_time" itemprop="dateCreated datePublished" :datetime="detial.create_time">{{(detial.create_time || '').split(' ')[0]}}</time>
              <span v-if="detial.update_time != null" class="meta-divider">|</span>
              <span v-if="detial.update_time != null" class="meta-item-icon"><i class="fa fa-calendar-check-o"></i></span>
              <span v-if="detial.update_time != null" class="meta-item-text">更新于</span>
              <time v-if="detial.update_time != null" :title="'修改时间：'+detial.update_time" itemprop="dateModified" :datetime="detial.update_time">{{(detial.update_time || '').split(' ')[0]}}</time>
            </span>
            <span class="post-category">
              <span class="meta-divider">|</span>
              <span class="meta-item-icon"><i class="fa fa-folder-o"></i></span>
              <span class="meta-item-text">分类于</span>
              <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing"><el-link :href="'/category/'+detial.category_id+'.html'" target="_blank"><span itemprop="name">{{detial.cate_name}}</span></el-link></span>
            </span>
            <span class="meta-divider">|</span>
            <span class="meta-item-icon"><i class="fa fa-eye"></i>阅读次数：<span class="busuanzi-value" id="busuanzi_value_page_pv">200</span></span>
            <div class="post-symbolscount">
              <span class="meta-divider">|</span>
              <span class="meta-item-icon"><i class="fa fa-file-word-o"></i></span>
              <span class="meta-item-text">本文字数：</span>
              <span title="本文字数">1.6k</span>
              <span class="meta-divider">|</span>
              <span class="meta-item-icon"><i class="fa fa-clock-o"></i></span>
              <span class="meta-item-text">阅读时长 ≈</span>
              <span title="阅读时长">5 分钟</span>
            </div>
          </el-row>
          <el-row class="content">
            <!-- <div class="markdown-body" v-html="detial.content" v-highlight></div> -->
            <!-- <markdown-it-vue-light class="md-body" :content="detial.content" /> -->
            <div id="markdown-view">
              <!-- Server-side output Markdown text -->
              <textarea style="display:none;" v-html="detial.content"></textarea>             
            </div>
          </el-row>
          <el-row class="prev-next">
            <div class="prev" v-if="detial.prev != null">
                上一篇：
                <a :href="'/view/'+detial.prev.id" :title="detial.prev.title">{{detial.prev.title}}</a>
            </div>
            <div class="next" v-if="detial.next != null">
                下一篇：
                <a :href="'/view/'+detial.next.id" :title="detial.next.title">{{detial.next.title}}</a>
            </div>
          </el-row>
          <el-row class="reward-container">
            <el-button type="primary" onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">打赏</el-button>
            <div id="qr" style="display: none;">
              <div style="display: inline-block">
                <img src="../assets/wechatpay.jpg" alt="Mr.Yong 微信支付">
                <p>微信支付</p>
              </div>
              <div style="display: inline-block">
                <img src="../assets/alipay.jpg" alt="Mr.Yong 支付宝">
                <p>支付宝</p>
              </div>
            </div>
          </el-row>
          <el-row>
            <ul class="post-copyright">
              <li class="post-copyright-author">
                <strong>本文作者： </strong>Mr.Yong</li>
                <li class="post-copyright-link">
                  <strong>本文链接：</strong>
                  <a :href="'/view/'+detial.id" :title="detial.title">{{current_url}}</a>
                </li>
                <li class="post-copyright-license">
                  <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"><i class="iconfont icon-creative-commons"></i> BY-NC-SA</a> 许可协议。转载请注明出处！
                </li>
              </ul>
          </el-row>
          <el-row>
            <div class="article-end">-------------本文结束<i class="iconfont icon-heart"></i>感谢您的阅读-------------</div>
          </el-row>
          <el-row class="tags">
            <a href="#" rel="tag" v-for="(tag,index) in detial.tags" :key='index'><i class="iconfont icon-tag"></i> {{tag.name}}</a>
          </el-row>
      </el-card>
      <Comments :params="cparams"></Comments>
  </div>
</template>


<script>
import scriptjs from 'scriptjs'
import Comments from "@/components/Comments";
import {getArticleInfo} from '@/api/article';

let _this;
export default {
  name: 'Article',
  components:{
    Comments,
    'remote-js': {
      render(createElement) {
        return createElement('script', {attrs: {type: 'text/javascript', src: this.src}});
      },
      props: {
        src: { type: String, required: true}
      }
    }
  },
  data () {
    return {
      params:{},
      cparams:{article_id:this.$route.params.id},
      detial:{
        content:''
      },
      current_url:window.location.href
    }
  },
  watch: {
      detial: function() {
          /*DOM还没更新*/
             _this.$nextTick(function(){
                /*现在数据已经渲染完毕*/
                //hljs.initHighlightingOnLoad();
                 //清除延迟执行 
                 let timer = setTimeout(()=>{   //设置延迟执行
                    var testView = editormd.markdownToHTML("markdown-view", {
                      // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
                      // htmlDecode : true,  // Enable / disable HTML tag encode.
                      // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
                  });
                  clearTimeout(timer);  //清除延迟执行 
                },500);
                
                
            })
            
      }
  },
  computed:{
    compiledMarkdown(){
      return '';
    }
  },
  created(){
  },
  mounted(){
    _this = this;
    _this.params = _this.$route.params;
    _this.createdLoca();
    //_this.syasJs()
    _this.getInfo()
   // hljs.highlightCode()
   _this.current_url = window.location.href
  },
  methods:{
    createdLoca(){

    },
    syasJs(){
      (async () => {
        // await _this.fetchScript('/static/js/jquery-1.8.3.min.js')
        // await _this.fetchScript('/static/js/editor.md/editormd.min.js')
        // await _this.fetchScript('/static/js/editor.md/lib/marked.min.js')
        // await _this.fetchScript('/static/js/editor.md/lib/prettify.min.js')
        _this.$nextTick(function(){
              /*现在数据已经渲染完毕*/
              //hljs.initHighlightingOnLoad();
              var testView = editormd.markdownToHTML("markdown-view", {
                htmlDecode: "style,script,iframe",  // you can filter tags decode
                emoji: true,
                taskList: true,
                tex: true,  // 默认不解析
                flowChart: true,  // 默认不解析
                sequenceDiagram: true,  // 默认不解析
                codeFold: true,
              });
          })
      })()
      
    },
    fetchScript: function (url) {
      return new Promise((resolve) => {
        scriptjs(url, () => {
          resolve()
        })
      })
    },
    view(id) {
        this.$router.push({path: `/view/${id}`})
    },
    getInfo(){
      let _param = {
        id: _this.params.id
      }
      getArticleInfo(_param).then(res => {
        _this.detial = res.data
        //_this.detial.content = marked(_this.detial.content)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
// .article .content >>> .hljs-params
//   color #383a42 !important
// .article .content >>> .hljs
//   color #383a42 !important
// .article .content >>> .hljs-string
//   color #50a14f !important
// .article .content >>> .hljs-title
//   color #4078f2 !important
// .article .content >>> .hljs .hljs-keyword
//   color #a626a4 !important
.article
  width 70%
  .article-info
    margin 50px 0 10px 0
    width 100%
    color #555
    background-color unset 
    h2
      text-align center
      font-weight 400
      font-size 26px
      padding-bottom 10px
    .meta
      width 100%
      font-size 12px
      color #999
      display flex
      justify-content center
      .meta-divider
        padding 0 3px
    .content
      padding-top 20px
      .editormd-html-preview
        background-color unset
        box-sizing border-box
        font-size 16px
      .markdown-body
        text-align justify
        line-height 2
    .reward-container 
      padding 10px 0
      margin 20px auto
      width 90%
      text-align center
      #qr 
        padding-top 20px
        img 
          width 180px
          max-width 100%
          display inline-block
          margin 0.8em 2em 0 2em
        p 
          text-align center
    .post-copyright
      margin 2em 0 0
      padding 0.5em 1em
      border-left 3px solid #ff1700
      background-color #f9f9f9
      list-style none
      line-height 2
      strong 
        font-weight bolder
      a
        overflow-wrap break-word
        word-wrap break-word
        background-color transparent
        color #555
        text-decoration none
        outline none
        border-bottom 1px solid #ccc
        cursor pointer
    .article-end
      text-align center
      color #ccc
      font-size 16px
      padding 20px 0
    .tags 
      text-align left
      a 
        padding 1px 5px
        background #f5f5f5
        border-bottom none
        display inline-block
        margin-right 10px
        font-size 13px
    .prev-next
      padding 20px 0
      line-height 2





</style>
